.main{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items: center;

    margin-top:20px;

    /* height:680px; */
}

.userInfo{
    text-align: center;
}

.update{
    display:flex;
    flex-direction: column;
    justify-content: space-around;

    height:300px;
}

.infoBox{
    display:flex;
    flex-direction: column;
    justify-content: space-around;

    height:220px;
}

.avatar{
    position:relative;
}

.shade{
    display: none;

    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    
    background-color: rgb(0, 0, 0,0.5);
}

.upload{
    width:100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    z-index: 10;
}



.avatar:hover .shade{
    display: flex;
    justify-content: center;
    align-items: center;

    color:white;
}


.avatar img{
    width:200px;
    height:200px;

    border-radius: 50%;
}